<template>
  <view class="auth-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration top-left"></view>
    <view class="bg-decoration bottom-right"></view>
    
    <!-- 登录卡片 -->
    <view class="auth-card">
      <view class="auth-header">
        <text class="auth-title">账号登录</text>
        <text class="auth-subtitle">欢迎使用健康服务平台</text>
      </view>
      
      <!-- 登录方式切换 -->
      <view class="login-tabs">
        <view 
          class="login-tab" 
          :class="{ active: loginType === 'password' }"
          @click="loginType = 'password'"
        >
          密码登录
        </view>
        <view 
          class="login-tab" 
          :class="{ active: loginType === 'code' }"
          @click="loginType = 'code'"
        >
          验证码登录
        </view>
      </view>
      
      <!-- 登录表单 -->
      <view class="auth-form">
        <!-- 手机号输入 -->
        <view class="form-item">
          <uni-icons type="phone" size="18" color="#6b7fd7" class="form-icon"></uni-icons>
          <input 
            class="form-input" 
            type="number" 
            placeholder="请输入手机号" 
            v-model="phone"
            maxlength="11"
          >
        </view>
        
        <!-- 密码/验证码输入 -->
        <view class="form-item">
          <uni-icons 
            :type="loginType === 'password' ? 'lock' : 'code'" 
            size="18" 
            color="#6b7fd7" 
            class="form-icon"
          ></uni-icons>
          <input 
            class="form-input" 
            :type="loginType === 'password' && !showPassword ? 'password' : 'text'" 
            :placeholder="loginType === 'password' ? '请输入密码' : '请输入验证码'" 
            v-model="loginType === 'password' ? password : code"
          >
          <view class="form-action">
            <!-- 密码显示切换 -->
            <uni-icons 
              v-if="loginType === 'password'"
              :type="showPassword ? 'eye' : 'eye-o'" 
              size="18" 
              color="#666"
              @click="showPassword = !showPassword"
            ></uni-icons>
            <!-- 验证码获取 -->
            <text 
              v-else
              class="code-btn" 
              @click="getCode"
              :style="{ color: isCounting ? '#ccc' : '#6b7fd7' }"
              :disabled="isCounting"
            >
              {{ codeBtnText }}
            </text>
          </view>
        </view>
        
        <!-- 记住密码 & 忘记密码 -->
        <view class="remember-option" v-if="loginType === 'password'">
          <uni-checkbox v-model="rememberPwd"></uni-checkbox>
          <text class="remember-text">记住密码</text>
          <text class="forgot-link" @click="showForgot = true">忘记密码？</text>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <view class="auth-btn" @click="doLogin">
        登录
      </view>
      
      <!-- 注册入口 -->
      <view class="no-account">
        <text class="account-text">还没有账号？</text>
        <text class="register-link" @click="goRegister">立即注册</text>
      </view>
    </view>
    
    <!-- 忘记密码弹窗 -->
    <uni-popup v-model="showForgot" type="center" :mask-click="false">
      <view class="forgot-popup">
        <view class="popup-header">
          <text class="popup-title">忘记密码</text>
          <uni-icons type="close" size="20" color="#666" @click="showForgot = false"></uni-icons>
        </view>
        <view class="popup-content">
          <view class="form-item">
            <uni-icons type="phone" size="18" color="#6b7fd7" class="form-icon"></uni-icons>
            <input 
              class="form-input" 
              type="number" 
              placeholder="请输入手机号" 
              v-model="forgotPhone"
              maxlength="11"
            >
          </view>
          <view class="form-item">
            <uni-icons type="code" size="18" color="#6b7fd7" class="form-icon"></uni-icons>
            <input 
              class="form-input" 
              type="number" 
              placeholder="请输入验证码" 
              v-model="forgotCode"
            >
            <text 
              class="code-btn" 
              @click="getForgotCode"
              :style="{ color: isForgotCounting ? '#ccc' : '#6b7fd7' }"
            >
              {{ forgotCodeBtnText }}
            </text>
          </view>
          <view class="form-item">
            <uni-icons type="lock" size="18" color="#6b7fd7" class="form-icon"></uni-icons>
            <input 
              class="form-input" 
              type="password" 
              placeholder="请设置新密码" 
              v-model="newPwd"
            >
          </view>
        </view>
        <view class="popup-footer">
          <view class="footer-btn" @click="resetPwd">确认重置</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';

// 1. 核心状态（简化，只保留必要字段）
const loginType = ref('password'); // 登录方式：password/code
const phone = ref(''); // 手机号
const password = ref(''); // 密码
const code = ref(''); // 验证码
const showPassword = ref(false); // 密码是否可见
const rememberPwd = ref(true); // 记住密码

// 2. 验证码相关（简化倒计时逻辑）
const codeBtnText = ref('获取验证码');
const isCounting = ref(false);
let codeTimer = null;

// 3. 忘记密码相关
const showForgot = ref(false);
const forgotPhone = ref('');
const forgotCode = ref('');
const newPwd = ref('');
const forgotCodeBtnText = ref('获取验证码');
const isForgotCounting = ref(false);
let forgotTimer = null;

// 4. 获取登录验证码
const getCode = () => {
  // 简单验证手机号
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    uni.showToast({ title: '请输入正确手机号', icon: 'none' });
    return;
  }
  
  // 倒计时60秒
  let count = 60;
  isCounting.value = true;
  codeBtnText.value = `${count}s后重发`;
  
  codeTimer = setInterval(() => {
    count--;
    if (count <= 0) {
      clearInterval(codeTimer);
      isCounting.value = false;
      codeBtnText.value = '获取验证码';
    } else {
      codeBtnText.value = `${count}s后重发`;
    }
  }, 1000);
  
  // 模拟发送验证码
  uni.showToast({ title: '验证码已发送', icon: 'none' });
};

// 5. 获取忘记密码验证码
const getForgotCode = () => {
  if (!/^1[3-9]\d{9}$/.test(forgotPhone.value)) {
    uni.showToast({ title: '请输入正确手机号', icon: 'none' });
    return;
  }
  
  let count = 60;
  isForgotCounting.value = true;
  forgotCodeBtnText.value = `${count}s后重发`;
  
  forgotTimer = setInterval(() => {
    count--;
    if (count <= 0) {
      clearInterval(forgotTimer);
      isForgotCounting.value = false;
      forgotCodeBtnText.value = '获取验证码';
    } else {
      forgotCodeBtnText.value = `${count}s后重发`;
    }
  }, 1000);
  
  uni.showToast({ title: '验证码已发送', icon: 'none' });
};

// 6. 执行登录（简化验证逻辑）
const doLogin = () => {
  // 验证手机号
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    uni.showToast({ title: '请输入正确手机号', icon: 'none' });
    return;
  }
  
  // 验证密码/验证码
  if (loginType.value === 'password') {
    if (!password.value || password.value.length < 6) {
      uni.showToast({ title: '请输入6位以上密码', icon: 'none' });
      return;
    }
  } else {
    if (!code.value || code.value.length !== 6) {
      uni.showToast({ title: '请输入6位验证码', icon: 'none' });
      return;
    }
  }
  
  // 模拟登录
  uni.showLoading({ title: '登录中...' });
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({ title: '登录成功', icon: 'success' });
    // 跳转到首页（根据实际路径修改）
    setTimeout(() => uni.switchTab({ url: '/pages/index' }), 1000);
  }, 1500);
};

// 7. 重置密码
const resetPwd = () => {
  if (!/^1[3-9]\d{9}$/.test(forgotPhone.value)) {
    uni.showToast({ title: '请输入正确手机号', icon: 'none' });
    return;
  }
  if (!forgotCode.value || forgotCode.value.length !== 6) {
    uni.showToast({ title: '请输入6位验证码', icon: 'none' });
    return;
  }
  if (!newPwd.value || newPwd.value.length < 6) {
    uni.showToast({ title: '请设置6位以上密码', icon: 'none' });
    return;
  }
  
  uni.showToast({ title: '密码重置成功', icon: 'success' });
  showForgot.value = false;
};

// 8. 跳转注册页（根据实际路径修改）
const goRegister = () => {
  uni.navigateTo({ url: '/pages/register' });
};

// 9. 页面卸载清除定时器
onUnmounted(() => {
  if (codeTimer) clearInterval(codeTimer);
  if (forgotTimer) clearInterval(forgotTimer);
});
</script>

<style scoped>
/* 保持原样式，只保留核心样式，删除冗余 */
.auth-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-decoration {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}

.top-left {
  top: -100px;
  left: -100px;
  background: linear-gradient(135deg, #6b7fd7, rgba(107, 127, 215, 0.2));
}

.bottom-right {
  bottom: -100px;
  right: -100px;
  background: linear-gradient(135deg, #8a5cf6, rgba(138, 92, 246, 0.2));
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 30px 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;
}

.auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.auth-subtitle {
  font-size: 14px;
  color: #666;
}

.login-tabs {
  display: flex;
  margin-bottom: 25px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f7fa;
}

.login-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.login-tab.active {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #fff;
}

.auth-form {
  margin-bottom: 25px;
}

.form-item {
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 8px;
  padding: 0 15px;
  height: 50px;
  margin-bottom: 15px;
}

.form-icon {
  margin-right: 10px;
}

.form-input {
  flex: 1;
  height: 100%;
  background: transparent;
  font-size: 14px;
  color: #333;
}

.form-action {
  color: #666;
}

.code-btn {
  font-size: 14px;
  cursor: pointer;
}

.remember-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.remember-text {
  margin-left: 8px;
}

.forgot-link {
  color: #6b7fd7;
  cursor: pointer;
}

.auth-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 25px;
}

.no-account {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.register-link {
  color: #6b7fd7;
  margin-left: 5px;
  cursor: pointer;
}

/* 忘记密码弹窗 */
.forgot-popup {
  width: 90%;
  max-width: 350px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.popup-content {
  margin-bottom: 20px;
}

.popup-footer {
  display: flex;
}

.footer-btn {
  flex: 1;
  height: 45px;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}
</style>